/**
 * 管理后台 - 首页 - 顶部导航栏
 * Author: Zeon
 * Date: 2017/8/1
 * Created by Panxsoft.
 */
<style lang="less" rel="stylesheet/less" type="text/less" scoped>
.v-nav-header {
    position: relative;
    height: 60px;
    background: #fff;
    box-shadow: 0 1px 1px rgba(0,0,0,.1);
    .drop-down {
        margin: 20px 30px 0 0;
        float: right;
    }

    img {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        width: 10%;
        margin: auto;
    }

    .badge {
        margin: 20px 30px 0 0;
        float: right;

        .notification {
            cursor: pointer;
        }
    }

}
</style>
<template>
<div class="v-nav-header layout-header">
    <i-button type="text" @click="toggleClick()">
        <Icon type="navicon" size="32"></Icon>
    </i-button>
    
    <!-- <img src="http://xikachelian.oss-cn-shenzhen.aliyuncs.com/assets/xika-web-admin/icon/xika-icon.png" alt=""> -->

    <Dropdown class='drop-down' trigger="click" placement="bottom-end" @on-click="clickDropdown">
        <a href="javascript:void(0)">
            欢迎您，尊敬的管理员
            <Icon type="arrow-down-b"></Icon>
        </a>

        <Dropdown-menu slot="list">
            <Dropdown-item name="cancel">退出登录</Dropdown-item>
            <!-- <Dropdown-item name="revise">修改密码</Dropdown-item> -->
        </Dropdown-menu>
    </Dropdown>

    <!--  修改密码模态框  -->
    <Modal v-model="show_form_modal"
            title="修改密码"
            width="350"
            height="400">
        <Form ref="formValidate" :model="formValidate" :label-width="80" :rules="ruleValidate">
            <Form-item label="原密码" prop="old_password">
                <Input type="password" v-model="formValidate.old_password" placeholder="请输入您的原密码" name="old_password"></Input>
            </Form-item>
            <Form-item label="新密码" prop="new_password">
                <Input type="password" v-model="formValidate.new_password" placeholder="请输入新密码" name="new_password"></Input>
            </Form-item>
            <Form-item label="确认新密码" prop="confirm_password">
                <Input type="password" v-model="formValidate.confirm_password" placeholder="请确认新密码" name="again_password"></Input>
            </Form-item>
            <Form-item>
                <Button type="primary" @click="handleSubmit('formValidate')">确定修改</Button>
            </Form-item>
        </Form>
        <div slot="footer"></div>
    </Modal>

    <!-- <Badge class="badge" :count="notification_count">
        <span class="notification" @click="checkNotification">
            <Icon type="ios-bell-outline" size="26"></Icon>
        </span>
    </Badge>   -->

</div>
</template>
<script>
import { delCookie } from 'src/cookies';
import { mapGetters,mapMutations } from 'vuex';
import API_LIST from 'src/API_LIST';

import {
    validatePass,
    validateNewPwd,
    validatePassCheck
} from 'src/validate';    //引入校验文件

const TOGGLE_SIDE_BAR = 'toggle-side-bar';

export default {

    data() {
        return {
            is_side_bar_open : true,

            notification_count: 0,

            timmer: null,

            show_form_modal : false,

            formValidate  : {
                old_password : '',
                new_password : '',
                confirm_password : ''
            },

            ruleValidate : {
                old_password : [
                    { required: true, message: '必填项', trigger: 'blur' },
                    { validator: validatePass, trigger: 'blur,change' }
                ],
                new_password : [
                    { required: true, message: '必填项', trigger: 'blur' },
                    { validator: validateNewPwd, trigger: 'blur,change' , pwd_info : this }
                ],
                confirm_password : [
                    { required: true, message: '必填项', trigger: 'blur' },
                    { validator: validatePassCheck, trigger: 'blur,change' , pwd_info : this }
                ]
            }
        }
    },
    methods: {

        ...mapMutations('userToken',[
            'deleteToken',
        ]),

        /**
         * 点击下拉菜单的事件
         * @param  {string} name {下拉菜单的name}
         * @return {undefined}
         */
        clickDropdown(name){

            switch (name) {
                case 'cancel':

                    this.cancelLogin();
                    
                    break;
            
                case 'revise':

                    this.revisePassword();
                    
                    break;
            }

        },

        /**
         * 退出登录
         * @return {undefined}
         */
        cancelLogin(){

            const self = this;

            // this.$emit('show-loading',true,'退出中');

            self.deleteToken();

            self.$Message.success('退出成功！');

            self.$router.push({
                path : '/login'
            });

            // this.$http.get( API_LIST.ADMIN_LOGOUT )
            //     .then(function({ data }){

            //         if( parseInt(data.code) !== 0 )throw new Error(data.error);

                            
            //     })
            //     .catch(function(err){

            //         self.$Message.error({
            //             content: err.message|| err.statusText,
            //             duration: 5,
            //             closable: true
            //         });
            
            //     })
            //     .then(()=>self.$emit('show-loading',false,''))

        },

        /**
         * 修改密码
         * @return {undefined}
         */
        revisePassword(){

            this.show_form_modal = true;

        },

        /**
         * 确定修改密码，提交表单
         * @param  {string} name {表单的ref}
         * @return {undefined}
         */
        handleSubmit (name) {
            this.$refs[name].validate((valid) => {
                if (valid) {

                    // 提交
                    this.confirmRevise();
                    
                } else {

                    this.$Message.error('存在未填写的条目!');

                }
            })
        },

        /**
         * 确定修改密码的post
         * @return {undefined}
         */
        confirmRevise(){

            this.$http.post( API_LIST.REVISE_PWD,this.formValidate)
                .then(({ data })=>{
                            
                    if( parseInt(data.code) !== 0 )throw new Error(data.error);

                    this.show_form_modal = false;

                    this.$Message.success('修改成功！');

                    this.$Message.info({
                        content: '检测到您的密码已经更改，将在3秒后跳转到登录页面',
                        duration: 3
                    })

                    let counts = 3;

                    let time = setInterval(()=>{

                        counts = counts - 1;

                        if( counts === 0 ) {

                            this.cancelLogin();

                        }

                    },3000)
                            
                })
                .catch((err)=>{

                    this.$Message.error({
                        content: err.message || err.statusText,
                        duration: 5,
                        closable: true
                    });

                })

        },

        toggleClick () {
            this.is_side_bar_open = ! this.is_side_bar_open;
            this.$emit(TOGGLE_SIDE_BAR, this.is_side_bar_open);
        },

    },
    mounted () {

    },
}
</script>